<template>
	<view class="contian">
		<DaDropdownVue2 :dropdownMenu="dropdownMenuList" themeColor="#007aff" textColor="#333333" :duration="300"
			fixedTop @confirm="handleConfirm" @close="handleClose" @open="handleOpen">
			<template v-slot:slot1="{item,index}">
				<view style="padding: 40px">自定义插槽内容</view>
			</template>
		</DaDropdownVue2>
		<image v-for="(item, index) in imgs" :key="index" :src="item" @click="preview(item)"></image>
		<q-previewImage ref="previewImage" :urls="pimgs" @onLongpress="onLongpress"></q-previewImage>
	</view>
</template>
</view>
</template>

<script>
	import DaDropdownVue2 from '@/components/da-dropdown-vue2/index.vue'
	export default {
		components: {
			DaDropdownVue2
		},
		data() {
			return {
				imgs: ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png',
					'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'
				],
				pimgs: [],
				themeColor: '#000000',
				filterResult: '',
				dropdownMenuList: [{
						title: '职位',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						// value: '2', // 默认内容2
						options: [{
								label: 'uni-app',
								value: '1',

							},
							{
								label: 'java开发',
								value: '2'
							},
							{
								label: 'web开发',
								value: '3'
							},
						],
					},
					{
						title: '月薪',
						// type: 'cell',
						// prop: 'god1',
						type: 'filter',
						prop: 'god4',
						// value: '2', // 默认内容2
						options: [{
								title: '月薪',
								type: 'radio',
								prop: 'ft1',
								options: [{
										label: '不限',
										value: '1'
									},
									{
										label: '7000~8000',
										value: '7000~8000'
									},
									{
										label: '8000~9000',
										value: '8000~9000'
									},
									{
										label: '<7000',
										value: '<7000'
									}
								],
							},

						],
					},
					{
						title: '排序',
						type: 'cell',
						prop: 'god1',
						showAll: true,
						showIcon: true,
						// value: '2', // 默认内容2
						options: [{
								label: '默认排序',
								value: '默认排序',

							},
							{
								label: '发布时间',
								value: 'add_time'
							},
							{
								label: '薪资最高',
								value: '薪资最高'
							},
							{
								label: '离我最近',
								value: 'location'
							}
						],
					},
					{
						title: '搜索',
						type: 'search',
						prop: 'god0',
					},
				],

			};
		},
		onLoad(option) {

		},
		onShow() {},
		methods: {
			handleConfirm(v) {
				console.log('handleConfirm ==>', v)
			},
			handleClose(v) {
				console.log('handleClose ==>', v)
			},
			handleOpen(v) {
				console.log('handleOpen ==>', v)
			},
			preview(url) {
				// this.imgs =  //设置图片数组
				this.pimgs = []
				this.pimgs.push(url)
				// #ifdef MP-WEIXIN
				this.$nextTick(() => {
					this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
				})
				// #endif

				// #ifndef MP-WEIXIN
				this.$refs.previewImage.open(url); // 传入当前选中的图片地址
				// #endif
			},
			onLongpress(e) { //长按事件
				console.log('当前长按的图片是' + e);
				uni.showActionSheet({
					itemList: ['转发给朋友', '保存到手机'],
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.contian {
		width: 100%;
		height: 100%;
	}
</style>